import React, { FC, useMemo, useState } from "react";

const UseMemo: FC = () => {

    console.log("hello")

  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(20);
  const [text, setText] = useState("hello"); //组件的state跟新就会跟新组件的值

  const sum = useMemo(() => {
      console.log("PPPPPPPP");
    return num2 + num1;
  }, [num1, num2]);

  return (
    <>
      <p>{sum}</p>
      <p>
        {num1}{" "}
        <button
          onClick={() => {
            setNum1(num1 + 1);
          }}
        >
          add num1
        </button>
      </p>
      <p>
        {num2}{" "}
        <button
          onClick={() => {
            setNum2(num2 + 1);
          }}
        >
          add num2
        </button>
      </p>
      <p>
        {sum}{" "}
        <button
          onClick={() => {
            setNum1(num1 + 1);
            setNum2(num2 + 1);
          }}
        >
          add num1 add num2
        </button>
      </p>
      <input
        onChange={(e) => {
          setText(e.target.value);
          console.log({text})
        }}
        value={text}
      ></input>
    </>
  );
};
export default UseMemo;
